import React, { Component } from 'react';
import Img from '../logo192.png';

export default class ListItem extends Component {
  constructor(props) {
    super(props);

    this.state = {
      isEditing: false,
      editContent: '',
      title: props.content.title || '标题',
      description: props.content.description || '描述',
      price: props.content.price || 0,
      star: props.content.star || 0,
      edited: props.content.edited || false,
      img: Img
    };
  }

  setEditContent = (e) => {
    this.setState({
      editContent: e.target.value
    });
  }

  submitComment = () => {
    // api
    this.setState({
      isEditing: false,
      editContent: '',
      edited: true
    });
    this.props.refresh();
  }

  getCommentEditArea() {
    return (
      <div className='edit-area'>
        <textarea value={ this.state.editContent } onChange={ this.setEditContent } className='edit'></textarea>
        <div className='btn-group'>
          <button onClick={ this.submitComment } className='submit'>提交</button>
          <button onClick={ this.showEditArea(false) } className='cancel'>取消</button>
        </div>
      </div>
    );
  }

  showEditArea = (flag) => {
    return () => {
      this.setState({
        isEditing: flag
      });
    };
  }

  render() {
    return (
      <div className='item'>
        <div className='wrap'>
          <div className='pic'>
            <img src={ this.state.img } alt='暂无图片' />
          </div>
          <div className='info'>
            <div className='title'>{ this.state.title }</div>
            <div className='description'>{ this.state.description }</div>
            <div className='price'>￥{ this.state.price.toFixed(2) }</div>
          </div>
        </div>
        <div className='btn'>
          {
            this.state.edited ? <button className='edited'>已评价</button> : <button onClick={ this.showEditArea(true) }>评价</button>
          }
        </div>
        { this.state.isEditing ? this.getCommentEditArea() : null }
      </div>
    );
  }
};
